<template>
  <div class="scope-container">
    <span class="no-reward" v-if="!reward.type">未设置</span>
    <template v-else-if="reward.type === 'score'">
      <span>{{reward.total}}积分</span>
    </template>
    <template v-else-if="reward.type === 'redpack'">
      <span>{{reward.total / 100}}元红包</span>
    </template>
    <template v-else-if="reward.type === 'coupon'">
      <span>优惠券"{{reward.coupon_title}}"</span>
    </template>
    <template v-else-if="reward.type === 'show_card'">
      <span>{{reward.total}}张透视卡</span>
    </template>
    <template v-else-if="reward.type === 'double_box_card'">
      <span>{{reward.total}}张双倍卡</span>
    </template>
    <template v-else-if="reward.type === 'exclude_card'">
      <span>{{reward.total}}张排除卡</span>
    </template>
    <template v-else-if="reward.type === 'free_ticket'">
      <span>{{reward.total}}次免费抽奖机会</span>
    </template>
    <a href="javascript:;" style="margin-left: 20px;" class="delete-text" @click="handleEditReward()">编辑</a>
  </div>
</template>

<script>
const resultEnum = ['success', 'error']

export default {
  name: 'Result',
  props: {
    value: {
		type: Object,
		default () {
			return {}
		}
	}
  },
  computed: {
  },
  watch: {
    reward (val) {
      this.$emit('input', val)
    },
    value (val) {
      this.reward = val || {}
    }
  },
  data () {
    return {
      reward: {}
    }
  },
  mounted () {
    this.reward = this.value
  },
  methods: {
    handleEditReward () {
      this.$iForm.show({
        title: '编辑奖品内容',
        frame: [
          {
            title: '奖励类型',
            type: 'radio',
            key: 'type',
            span: 24,
            tips: '注意：双倍卡数量以外边数量为准,这边数量都填1',
            options: [
              
              {
                title: '优惠券',
                value: 'coupon'
              },
              {
                title: '双倍卡',
                value: 'double_box_card'
              }
            ]
          },
          {
            title: '奖励数量',
            key: 'total',
            type: 'number',
            suffix: '积分',
            where: {
              type: 'score'
            }
          },
          {
            title: '奖励数量',
            key: 'total',
            type: 'number',
            suffix: '张',
            where: {
              type: 'double_box_card'
            }
          },
          {
            title: '奖励数量',
            key: 'total',
            type: 'price',
            suffix: '红包',
            where: {
              type: 'redpack'
            }
          },
          {
            title: '优惠券',
            key: 'coupon_id',
            type: 'coupon_id',
            change: (coupon) => {
              if (coupon) {
                this.$set(this.reward, 'coupon_title', coupon.title)
              }
            },
            where: {
              type: 'coupon'
            },
            tips: '注意：同一张券只能被同一用户领取一次'
          },
          {
            title: '数量',
            key: 'total',
            type: 'number',
            suffix: '张',
            where: {
              type: 'show_card'
            }
          },
          {
            title: '数量',
            key: 'total',
            type: 'number',
            suffix: '张',
            where: {
              type: 'exclude_card'
            }
          },
          {
            title: '数量',
            key: 'total',
            type: 'number',
            suffix: '次免费抽奖机会',
            where: {
              type: 'free_ticket'
            }
          }
        ],
        form: this.reward,
        success: (data) => {
          this.reward = {
            ...this.reward,
            ...data,
          }
          this.$iForm.hide()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .scope-container {
    display: inline;
  }
  .no-reward {
    color: gray;
    font-style:italic;
  }
// .small-key-text {
//   font-size: 90%;
//   color: gray;
//   margin-right: 4px;
// }
</style>
